<template>
    <div v-show="this.show">
        <div class="occidentMain">
            <div class="MainCarousel">
                <flexCarous :imgList="imgList" />
            </div>
        </div>
    </div>
</template>

<script>

import flexCarous from './flexCarous.vue'

export default {

    components:{flexCarous},

    data(){
        return{
            hzName:"HipHop",
            key:"2-1",
            show:false,
            imgList:[
                    {url:require('@/static/image/2-1-1.jpg')},  
                    {url:require('@/static/image/2-1-2.jpg')}, 
                    {url:require('@/static/image/2-1-3.jpeg')},            ]
        }
    },
    methods: {
        showPage(key){
            if(key==this.key){
                this.show = true
            }
            else{
                this.show = false   
            }
        }
    },
    mounted() {
        this.$bus.$on("showPage",this.showPage)
    },
    beforeDestroy(){
        this.$bus.$off("showPage");
    }
}
</script>

<style scoped>

    .MainCarousel{
        position:relative;
        top:100px;
        
    }

    .occidentMain{
        background-image:url("../static/image/occBackground.jpg");
        background-size:100% 100%;
        height: 640px;
    }

    .el-header, .el-footer {
        background-color: rgb(173, 172, 172);
        color: #1D3D4F;
        text-align: center;
        height: 100px;
    }
    
    .el-main {
        background-color:rgb(209, 209, 209);
        color: #1D3D4F;
        text-align: center;
        height:500px;
    }
    
    body > .el-container {
        margin-bottom: 40px;
    }
    
    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }
    
    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

</style>